<template>
  <view class="activity-open">
    <view class="activity-open__switch">
      <view>签到奖励</view>
      <switch :checked="shopList[0].isEnableRewardSign" color="#db187c" @change="regulation"></switch>
    </view>

    <view class="activity-open__tip">温馨提示：</view>
    <view class="activity-open__tip--explain" @tap="regulationShow = true">
      开启活动后，下级会员可参与签到活动，签到奖励的成本由店主自行承担；成本计算请参考<text>【奖励规则】</text>或咨询技术部！</view>
    <view class="activity-open__mask" v-if="regulationShow"></view>
    <view class="activity-open__rule" v-if="regulationShow">
      <image class="r-img" :src="'activity/sign-in/rule.png' | prefixOssUrl" alt="" />
      <view class="iconfont close" @tap="regulationShow = false">&#xe650;</view>
      <view class="r-main">
        <view class="m-title">签到规则</view>
        <view class="m-content">1.
          会员须登录小程序才可参与签到奖励活动，非会员可联系当地专卖店注册会员；</view>
        <view class="m-content">
          2.
          同一个账号每天可签到一次，签到可获得1元奖励，奖励直接发放到至尊钱包；
        </view>
        <view class="m-content">3. 若断签视为过期，不能补签；</view>
        <view class="m-title">奖励使用规则</view>
        <view class="m-content">1. 奖励直接发放到至尊钱包，可用于订单支付抵扣；</view>
        <view class="m-content">2. 奖励不可提现、不可转赠；</view>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import {
    model
  } from "@/model";
  const {
    Shop
  } = model.collection;
  export default {
    data() {
      return {
        regulationShow: false,
      };
    },
    computed: {
      ...mapState("user", ["shopList"]),
    },
    methods: {
      regulation(e) {
        this.updateSingleField(Number(e.detail.value));
      },
      async updateSingleField(value) {
        this.shopList[0] && (this.shopList[0].isEnableRewardSign = Number(value));
        const res = await Shop.sendApi("updateSingleField", {
          params: {
            type: 1,
          },
          data: {
            value,
          },
        });
        if (res.code !== 2000) {
          this.shopList[0] &&
            (this.shopList[0].isEnableRewardSign = Number(!value));
          return;
        }
        if (value) {
          this.regulationShow = true;
        }
        this.shopList[0] && (this.shopList[0].isEnableRewardSign = Number(value));
      },
    },
  };
</script>

<style lang="less">
  page {
    background-color: #f7f7f7;

    .flexCenter() {
      display: flex;
      align-items: center;
    }

    .activity-open {
      &__switch {
        .flexCenter();
        justify-content: space-between;
        margin: 30rpx 0 0;
        padding: 0 30rpx;
        height: 90rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #373737;
        background-color: #fff;
        box-sizing: border-box;

        >view:last-child {
          .flexCenter();
          font-size: 26rpx;
          color: #999;

          icon {
            margin: -6rpx - 12rpx 0 0;
            color: #595656;
          }
        }
      }

      &__tip {
        margin: 29rpx 0 23rpx 30rpx;
        font-size: 30rpx;
        line-height: 34rpx;
        font-weight: bold;
        color: #333;
      }

      &__tip--explain {
        margin: 0 30rpx;
        font-size: 30rpx;
        color: #666;

        >text {
          color: #db187c;
        }
      }

      &__mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
      }

      &__rule {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        left: 10%;
        top: 18%;
        z-index: 999;
        width: 600rpx;
        height: 680rpx;
        border-radius: 20rpx;

        .close {
          position: absolute;
          right: 5%;
          top: 5%;
          font-size: 50rpx;
          color: #fff;
        }

        .r-img {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          width: 600rpx;
          height: 680rpx;
        }

        .r-main {
          width: 560rpx;
          height: 600rpx;
          margin: 160rpx 0 20rpx 0;
          padding: 0 20rpx;
          overflow-y: auto;

          .m-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
          }

          .m-content {
            margin: 20rpx 0;
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
    }
  }
</style>